import { defineComponent, ref, nextTick, watchEffect, openBlock, createElementBlock, createElementVNode, normalizeStyle, renderSlot, toDisplayString, createCommentVNode } from "vue";
const _hoisted_1 = { class: "me-fold" };
const _hoisted_2 = {
  key: 0,
  class: "me-fold-footer"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "me-fold"
  },
  __name: "fold",
  props: {
    height: { default: "auto" },
    rows: {},
    showExpand: { type: Boolean, default: true }
  },
  emits: ["toggle"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const isExpand = ref(false);
    const foldHeight = ref(props.height);
    const ellipsisStyle = ref({});
    const foldContentRef = ref();
    let initialHeight = 0;
    let initialRows = 0;
    const setFoldHeight = () => {
      const { height, rows } = props;
      let h = 0;
      let r = rows;
      nextTick(() => {
        const lineHeight = parseFloat(getComputedStyle(foldContentRef.value).lineHeight);
        if (rows && rows > 0) {
          h = lineHeight * rows;
        } else {
          h = height.includes("rem") ? parseFloat(height) * 100 : parseFloat(height);
          r = Math.ceil(parseFloat(h / lineHeight + ""));
        }
        foldHeight.value = `${h}px`;
        ellipsisStyle.value = {
          "-webkit-line-clamp": r
        };
        initialHeight = h;
        initialRows = r;
      });
    };
    watchEffect(() => {
      setFoldHeight();
    });
    const toggle = () => {
      isExpand.value = !isExpand.value;
      if (isExpand.value) {
        const prevHeight = foldContentRef.value.getBoundingClientRect().height;
        foldContentRef.value.style.height = "auto";
        foldHeight.value = "auto";
        ellipsisStyle.value = {};
        nextTick(() => {
          const height = foldContentRef.value.getBoundingClientRect().height;
          foldContentRef.value.style.transition = "height 0.3s";
          foldContentRef.value.style.height = prevHeight + "px";
          nextTick(() => {
            foldContentRef.value.getBoundingClientRect();
            foldContentRef.value.style.height = height + "px";
          });
        });
      } else {
        nextTick(() => {
          foldHeight.value = `${initialHeight}px`;
          setTimeout(() => {
            ellipsisStyle.value = {
              "-webkit-line-clamp": initialRows
            };
          }, 300);
        });
      }
      emits("toggle", isExpand.value);
    };
    __expose({
      toggle
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        createElementVNode("div", {
          class: "me-fold-content",
          style: normalizeStyle({ height: foldHeight.value, ...ellipsisStyle.value }),
          ref_key: "foldContentRef",
          ref: foldContentRef
        }, [
          renderSlot(_ctx.$slots, "default")
        ], 4),
        renderSlot(_ctx.$slots, "extra", {}, () => [
          _ctx.showExpand ? (openBlock(), createElementBlock("div", _hoisted_2, [
            createElementVNode("span", {
              class: "me-fold-footer-btn",
              onClick: toggle
            }, toDisplayString(isExpand.value ? "收起" : "展开"), 1)
          ])) : createCommentVNode("", true)
        ])
      ]);
    };
  }
});
export {
  _sfc_main as default
};
//# sourceMappingURL=fold.vue2.mjs.map
